<template>
  <view class="px-4 min-h-full overflow-auto pb-40rpx">
    <view class="top-bg"></view>
    <u-navbar placeholder bg-color="transparent">
      <template #left>
        <u-icon name="home" size="20"></u-icon>
      </template>
      <template #center>
        <div class="w-[80%]">
          <u-search v-model="keyword" placeholder="日照香炉生紫烟"></u-search>
        </div>
      </template>
    </u-navbar>
    <u-tabs
      :item-style="{ flex: 1, lineHeight: '44px', background: 'red' }"
      :list="list2"
      class="tabs"
    ></u-tabs>
    <view class="home">
      <u-swiper
        :list="list5"
        :autoplay="false"
        height="140rpx"
        @change="(e) => (current = e.current)"
      >
        <template #indicator>
          <view class="indicator">
            <view
              v-for="(item, index) in list5"
              :key="index"
              class="indicator__dot"
              :class="[index === current && 'indicator__dot--active']"
            >
            </view>
          </view>
        </template>
      </u-swiper>
    </view>
    <view class="m-30px">
      <u-scroll-list @right="right" @left="left">
        <view class="scroll-list" style="flex-direction: row;">
          <view
            v-for="(item, index) in scollList"
            :key="index"
            class="scroll-list__goods-item"
            :class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
          >
            <image class="scroll-list__goods-item__image" :src="item.thumb"></image>
            <text class="scroll-list__goods-item__text">
              ￥{{ item.price }}
            </text>
          </view>
          <view class="scroll-list__show-more">
            <text class="scroll-list__show-more__text">
              查看更多
            </text>
            <u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
          </view>
        </view>
      </u-scroll-list>
    </view>
    <u-icon name="photo"></u-icon>
    <up-input v-model="a"></up-input>
    <view class="w-[200rpx] item">
      <view class="bg-white py-40px">
        12121
      </view>
      <view class="bg-orange-500 py-10rpx">
        121212
      </view>
    </view>
    <view> 121212121xxxx </view>
    <view class="classify flex items-center z-999 bg-white" :style="{ top: `${navbarHeight}px` }" :class="{ fixed: scrollTop > topHight }">
      <view>分类1</view>
      <view>分类2</view>
      <view>分类3</view>
      <view>分类4</view>
      <view @click="top">
        更多
      </view>
    </view>
    <view class="flex items-center bg-orange-500 rounded-16rpx mt-40rpx">
      <view class="item w-[200rpx] bg-orange-100">
        <view
          class="py-10rpx text-center bg-yellow-300 text-24rpx text-gray-600 w-[120rpx] m-auto rounded-b-8rpx"
        >
          抵扣券
        </view>
        <view
          class="text-24rpx text-orange-500 h-[60rpx] text-center flex items-center justify-center"
        >
          可叠加使用
        </view>
        <view class="text-24rpx bg-orange-500 py-16rpx text-center text-white">
          无限制
        </view>
      </view>
      <view
        class="flex-1 pl-20rpx flex flex-col justify-between self-stretch py-20rpx text-white"
      >
        <view class="text-32rpx">
          联盟商家任意一家可获取
        </view>

        <view class="text-24rpx mt-30rpx flex items-center">
          余额
          <text class="ml-10rpx">
            ￥
          </text>
          <text class="text-36rpx">
            578.00
          </text>
        </view>
      </view>
    </view>
    <view class="detail">
      <view class="bg">
        <image
          src="http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg"
          mode="widthFix"
        ></image>
      </view>
    </view>
    <view class="notice">
      <u-notice-bar
        color="red"
        text="122222222222222222222222222222222222"
      ></u-notice-bar>
    </view>
    <view class="flex">
      <view v-for="(item, index) in list5" :key="index" class="flex-1">
        <up-image :show-loading="true" :src="item" width="100%"></up-image>
      </view>
    </view>
    <u-tag text="标签" plain size="mini" type="warning"></u-tag>
    <u-button @click="to">
      to
    </u-button>
    <u-button :custom-style="{ width: '100px' }" @click="getAddres">
      获取地址
    </u-button>
    <w-qrcode :options="options"></w-qrcode>
    <w-barcode :options="options1"></w-barcode>
    <view class="trapezoid"></view>
  </view>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue'
import { onPageScroll } from '@dcloudio/uni-app'
import { uuid } from '@/utils'

const instance = getCurrentInstance()
const { proxy } = instance
const a = ref('')
const current = ref(0)
const list5 = [
  'https://cdn.uviewui.com/uview/swiper/swiper1.png',
  'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  'https://cdn.uviewui.com/uview/swiper/swiper3.png',
]
const to = () => {
  console.log(proxy.$Route)
  proxy.$Router.push('/pages/contact/index')
}
const options = {
  size: 670, // 宽度 单位rpx
  code: 'https://cdn.uviewui.com/uview/swiper/swiper3.png', // 生成条形码的值
}
const options1 = {
  width: 670, // 宽度 单位rpx
  height: 120, // 高度 单位rpx
  code: 'E57890543271985', // 生成条形码的值
  text: {
    content: 'E01181016286106',
    color: ['#ee0979', '#e96443', '#904e95'],
    position: 'bottom', // bottom
    size: 40,
    padding: 20,
  },
}
const getAddres = async () => {
  console.log(proxy.$api)
  const res = await proxy.$api.getAddress({
    location: '39.984154,116.307490',
    get_poi: 1,
  })
  console.log(res)
}
const list2 = [
  {
    name: '关注',
    disabled: true,
  },
  {
    name: '推荐',
    badge: {
      isDot: true,
    },
  },
]

const code = uuid()
console.log(code, 'code')

const scollList = [{
  thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg',
}, {
  thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg',
}, {
  thumb: 'https://cdn.uviewui.com/uview/goods/3.jpg',
}, {
  thumb: 'https://cdn.uviewui.com/uview/goods/4.jpg',
}, {
  thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg',
}, {
  thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg',
}, {
  thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg',
}, {
  thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg',
}, {
  thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg',
}, {
  thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg',
}, {
  thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg',
}, {
  thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg',
}, {
  thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg',
}]

const scrollTop = ref(0)
const topHight = ref(0)
const navbarHeight = proxy.$store.app.navbarHeight
function top() {
  uni.pageScrollTo({
    scrollTop: topHight.value - navbarHeight,
    duration: 200,
  })
}
onMounted(() => {
  const query = uni.createSelectorQuery().in(instance)
  query.select('.classify').boundingClientRect((data) => {
    topHight.value = data.top
  }).exec()
})
onPageScroll((res) => {
  scrollTop.value = res.scrollTop + navbarHeight + 10
})
</script>

<script>
export default {
  options: { styleIsolation: 'shared' },
}
</script>

<style lang="scss">
// :deep(.u-navbar) {
//   &>view {
//     background-image: linear-gradient(134deg, #fef4ea 0%, #fdd77e 100%);
//   }
//   .u-status-bar,.u-navbar__content {
//     background: none !important;
//   }
// }
.top-bg {
  background-image: linear-gradient(134deg, #fef4ea 0%, #fdd77e 100%);
  top: 0;
  height: 200rpx;
  width: 100%;
  left: 0;
}
.indicator {
  @include flex(row);
  justify-content: center;

  &__dot {
    height: 6px;
    width: 6px;
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.35);
    margin: 0 5px;
    transition: background-color 0.3s;

    &--active {
      background-color: #ffffff;
    }
  }
}

.indicator-num {
  padding: 2px 0;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 100px;
  width: 35px;
  @include flex;
  justify-content: center;

  &__text {
    color: #ffffff;
    font-size: 12px;
  }
}
.item {
  overflow: hidden;
  border-radius: 16rpx 0 0 16rpx;
  position: relative;
  &::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 27px;
    left: -30%;
    width: 160%;
    height: 10px;
    background-color: rgba(255, 237, 213, var(--tw-bg-opacity));
    border-radius: 100%;
  }
}
.notice {
  color: red;
}
.detail {
  background: rgba(7, 17, 27, 0.5);
  position: relative;
  height: 124px;
  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: blur(10px);
    image {
      width: 100%;
    }
  }
}
.trapezoid {
  position: relative;
  display: inline-block;
  width: 100rpx;
  height: 80rpx;
  &::before {
    content: "";
    width: 100rpx;
    height: 80rpx;
    transform: perspective(20rpx) scale(1, 1) rotateX(5deg);
    box-shadow: 0, 0, 4rpx 6rpx rgba(0, 0, 0, 0.6);
    position: absolute;
    left: 0;
    background: red;
  }
  &::after {
    content: "";
    background: red;
    width: 60px;
    height: 100%;
    top: 0;
    left: -10px;
    position: absolute;
  }
}
.scroll-list {
  @include flex(column);

  &__goods-item {
    margin-right: 20px;

    &__image {
      width: 60px;
      height: 60px;
      border-radius: 4px;
    }

    &__text {
      color: #f56c6c;
      text-align: center;
      font-size: 12px;
      margin-top: 5px;
    }
  }

  &__show-more {
    background-color: #fff0f0;
    border-radius: 3px;
    padding: 3px 6px;
    @include flex(column);
    align-items: center;

    &__text {
      font-size: 12px;
      width: 12px;
      color: #f56c6c;
      line-height: 16px;
    }
  }
}
</style>
